<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=4, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4593809_6wz8x6e7x8o.css">
    <style>
        body {
            background-color: #ccc;
            display: flex;
            justify-content: center;
        }
        .aaa{
            height: 349px;
            width: 673px;
            background-color: rgb(255, 255, 255);
            padding: 52px 65px 29px 92px;
            background-image:url(./img/22.png),url(./img/33.png) ;
            background-position: 0 100%, 100% 100%;
            background-repeat: no-repeat, no-repeat;
            background-size: 14%;
        }
        .bbb{
            width: 32px;
            height: 32px;
            position: absolute;
            top: 20px;
            right: 20px;
            background: url(https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/close.a35a1809.svg) no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
            z-index: 2;
        }
        .ccc{
            width: 173px;
            display: flex;
            flex-direction: column;
            align-items: center;
            align-items: center;
        }
        .ccc1{
            margin-top: 0px;
            margin-bottom: 26px
        }

        .fgx{
            width: 1px;
            height: 228px;
            margin: 43px 44px 0 45px;
            background-color: black;
        }
        .dui{
            display: flex;
        }
        .duanx{
            display: none;
        }
        .active{
            color:#4fa5d9
        }
        .box1{
            width: 200px;
			height: 100px;
			background-color: brown;
        }
        .an{
            background-color: black;
            color: white;
        }
        .ddd{
            width: 400px;
        }
        .fff{
            display: flex;
            justify-content: center;
            margin-bottom: 24px;
        }
        .eee{
            width: 1px;
            height: 20px;
            background: #e3e5e7;
            border-radius: 8px;
            margin: 0 21px;
        }
        .ggg{
            border: 1px solid #ccc;
            padding: 0px;
            border-radius:10px;
        }
        /* 注册按钮 */
        .hhh{
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        .hh1{
            width: 194px;
            height: 40px;
            cursor: pointer;
            color: #324068;
            background: #fff;
            border: 1px solid #e3e5e7;
            border-radius: 8px;
        }
        .hh2{
            width: 194px;
            height: 40px;
            cursor: pointer;
            color: #ffffff;
            background: #00aeec;
            border: 1px solid #e3e5e7;
            border-radius: 8px;
        }
        .hh3{
            width: 194px;
            height: 40px;
            cursor: pointer;
            color: #ffffff;
            background: #00aeec;
            border: 1px solid #e3e5e7;
            border-radius: 8px;
            margin-top: 20px;
        }
        .hh33{
            display: flex;
            justify-content: center;
        }
        .bkl{
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 100%;
            height: 44px;
            padding: 12px 20px;
            /* border: 1px solid #e3e5e7;
            border-radius: 16px; */
        }
        .bk{
            border: 1px solid #e3e5e7;
            border-radius: 16px;
        }
        .bkl input{
            margin-left: 20px;
            padding:0;
        }
        .hq{
            width: 90px;
            text-align: center;
        }
        .lianj{margin-top: 18px}
        .lianj p{
            text-align: center;
            font-size: 13px;
            margin: 0px;
        }
        .qtf{
            margin-top: 24px;
        }
        .qtf1{
            text-align: center;
            font-size: 13px;

        }
        .qtff{
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 13px;
            margin-top: 12px;
        }
        .qtff div{
            margin-right: 30px;
            
        }
        .qtff img{
            margin-right: 8px;
            height:28px;
        }
        .yhxy{
            text-align: center;
            margin-top: 40px;
            font-size: 13px;
            p{
                color: #666;
                margin: 0px;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="aaa">
            <div class="bbb"></div>
            <div class="dui">
                <!-- 左侧 -->
                <div>
                    <div class="ccc">
                        <p class="ccc1">扫描二维码登录</p>
                        <div>
                            <img src="./img/bb.webp" alt="" height="173px">
                        </div>
                        <div class="lianj">
                            <p> 请使用 <a href="https://app.bilibili.com/" target="_blank">哔哩哔哩客户端</a></p>
                            <p>扫码登录或扫码下载APP</p>
                        </div>
                    </div>    
                </div>
                <!-- 分割线 -->
                <div class="fgx"></div>
                <!-- 右侧 -->
                <div class="ddd">
                    <div class="fff">
                        <div :class="{active:activeIndex===0}" @click="activeIndex=0">密码登录</div>
                        <div class="eee"></div>
                        <div :class="{active:activeIndex===1}" @click="activeIndex=1">短信登录</div>
                    </div>
                    <div>
                        <div v-show="activeIndex===0">
                            <div>
                                <div class="ggg">
                                    <div class="bkl" style="border-bottom:1px solid #e3e5e7;">
                                        <div>账号</div><input type="text" placeholder="请输入账号">
                                    </div>
                                    <div class="bkl">
                                        <div>密码</div><input :type="word ? 'text' : 'password'" v-model="password" type="text" placeholder="请输入密码">
                                        <button @click="dian">
                                            {{ word ? '👁' : '👁️‍🗨️' }}</button>
                                        <div @click="wangji">忘记密码？</div>
                                        <div :class="c1" v-if="display" ></div>
                                    </div>

                                </div>
                            </div>
                            <div class="hhh">
                                <button class="hh1">注册</button>
                                <button class="hh2">登录</button>
                            </div>
                        </div>
                        <!-- 短信登录--- 输入框加按钮 -->
                        <div v-show="activeIndex===1">
                            <div>
                                <div class="ggg">
                                    <div class="bkl" style="border-bottom:1px solid #e3e5e7;">
                                        <select v-model="www">
                                            <option value="1">+86</option>
                                            <option value="2">+852</option>
                                            <option value="3">+886</option>
                                            <option value="4">+1</option>
                                            <option value="5">+32</option>

                                        </select>
                                        <input type="text" placeholder="请输入手机号">
                                        <button class="hq">获取验证码</button>
                                    </div>
                                    <div class="bkl">
                                        <div>验证码</div><input type="text" placeholder="请输入验证码">
                                    </div>
                                    
                                </div>
                            </div>
                            <div class="hh33">
                                <button class="hh3">登录/注册</button>
                            </div>
                        </div>
                    </div>
                    <!-- 其他登录方式 -->
                    <div class="qtf">
                        <div class="qtf1">其他登录方式</div>
                        <div class="qtff">
                            <img src="./img/微信.png" alt="">
                            <div>微信登陆</div>
                            <img src="./img/微博.png" alt="">
                            <div>微博登陆</div>
                            <img src="./img/QQ.png" alt="">
                            <div>QQ登陆</div>
                         </div>
                    </div>


                </div>
            </div>

            <div class="yhxy">
                <p>未注册过哔哩哔哩的手机号，我们将自动帮你注册账号</p>
                <p>
                    登录或完成注册即代表你同意
                    <span>用户协议<span>和 </span></span>
                    <span> 隐私政策 <span class="link_word"> </span></span>
                </p>
            </div>
            
           
        </div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
	const {createApp,ref} = Vue;
	createApp({
        setup(){
            let activeIndex=ref(0)
            const password = ref('')
            const word = ref(false)
            const du =`<i class="iconfont icon-yanjing_xianshi_o></i>`

            let an = ref('an')  //关闭按钮的class名，点击关闭时class名为an，反之为box1。
            let c1 = ref('box1')
            let display = ref(false)

            const www = ref('1');
            function wangji(){               

                display.value=!display.value
            }

            function dian() {
                word.value = !word.value
            }
            return{
                activeIndex,
                password,
                word,
                wangji,
                display,
                c1,
                an,
                dian,
                du,
                www

            }
        }
    }).mount('#app')
</script>
</html>
<!-- 随便实现一个网页，点击一个登录按钮，登录界面显示，点击×关闭界面 -->
<!-- class="iconfont icon-yanjing_xianshi_o icon-yanjing_yincang_o" -->
